<template>
  <view>
    <van-tabs :active="Tabactive" @change="onTabactiveChange">
      <van-tab title="推荐">
        <block v-for="(item,i) in activityItem" :key="i">
          <userActivity :activityItem="item" :TabShow="true"></userActivity>
        </block>
      </van-tab>
      <van-tab title="进行中">
        <block v-for="(item,i) in activityItem" :key="i">
          <userActivity :activityItem="item" :TabShow="true"></userActivity>
        </block>
      </van-tab>
      <van-tab title="我参与的">
        <block v-for="(item,i) in activityItem" :key="i">
          <userActivity :activityItem="item" :TabShow="true"></userActivity>
        </block>
      </van-tab>
    </van-tabs>
  </view>
</template>

<script>
  import {
    activityList
  } from '@/api/activity.js'
  import {
    mapState,
    mapMutations,
    mapGetters
  } from 'vuex'
  import userActivity from "@/components/user_activity/user_activity.vue"
  export default {
    data() {
      return {
        Tabactive: 0,
        activityList: [],
        activityItem: [],

        // 当前页
        current: 1
      };
    },
    onLoad() {
      this.getactivityList()
    },
    components: {
      userActivity
    },
    computed: {
      ...mapGetters('m_user', ['userInfo', 'currentStoreId']),
    },
    onReachBottom() {
      if (this.current * this.activityList.size >= this.activityList.total) return
      this.current++
      this.getactivityList()
    },
    methods: {
      onTabactiveChange(e) {
        console.log(e)
        this.Tabactive = e.detail.index
        this.current = 1
        this.activityItem = []
        this.getactivityList()
      },
      getactivityList() {
        const query = {
          current: this.current,
          status: -1,
          shopId: this.currentStoreId
        }
        if (this.Tabactive == 0) {

        } else if (this.Tabactive == 1) {
          query.status = 2
        } else {
          query.status = 10
        }
        activityList(query).then(res => {

          res.data.records.forEach(item => {
            item.validDate = item.validDate.split(',')
            // 时间剩余
            var time = item.validDate[1]
            var repTime = time.replace(/-/g, '/');
            var timeTamp = Date.parse(repTime);
            item.validDate[1] = timeTamp - new Date().getTime()
          })
          // console.log(res)
          this.activityList = res.data
          this.activityItem = [...this.activityItem, ...res.data.records]
        }).catch(err => {
          this.$util.Tips({
            title: err
          });
        })
      },
      // 时间天数
      formatDuring(mss) {
        var days = parseInt(mss / (1000 * 60 * 60 * 24));
        var hours = parseInt((mss % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        var minutes = parseInt((mss % (1000 * 60 * 60)) / (1000 * 60));
        var seconds = (mss % (1000 * 60)) / 1000;
        if (days) {
          return days + "天"
        } else if (hours) {
          return hours + "小时"
        } else {
          return minutes + "分钟"
        }
      },
    }
  }
</script>

<style lang="scss">
  /deep/ .van-tab {
    flex: none !important;
    -webkit-flex: none !important;
  }

  /deep/ .van-tabs__nav {
    padding: 20rpx 24rpx !important;
  }

  /deep/ .van-tabs__line {
    display: none;
  }

  /deep/ .van-tab--active {
    font-size: 36rpx !important;
    // font-weight: bold !important;
  }

  /deep/ .van-tabs__nav {
    display: flex;
    align-items: center;
  }

  /deep/ .van-ellipsis {
    margin-right: 20rpx;
  }

  /deep/ .van-hairline--top-bottom:after {
    border: none !important;
  }

  /deep/ .van-tabs__content {
    overflow: visible !important;
  }
</style>
